<template>
        <div class="header">
            <div class="icon" @click="backClick">
                <el-icon color="#B57DF2"><ArrowLeftBold /></el-icon>
                返回
            </div>
            <div class="title">
                <span v-if="showInput">标题：</span>
                <h2 v-if="!showInput">{{ title }}</h2>
                <el-icon v-if="!showInput" style="cursor: pointer;" color="#B57DF2" @click="clickEditTitle"><EditPen /></el-icon>
                <el-input
                    v-if="showInput"
                    class="tag-input"
                    style="width: 160px;"
                    size="small"
                    v-model="inputText"
                    @keyup.enter="inputClick"
                    @blur="inputClick"
                />
            </div>
            <div class="tag" v-if="tagList">
                <span>标签：</span>
                <!-- <a-tag class="ml-2" :closable="true" color="#ECF5FF" v-for="item in tagList" @close="deleteTags(item)">
                    {{ item }}
                </a-tag> -->
                <el-tag  class="ml-2"  type="info"  :disable-transitions="true" effect="plain" v-for="item in tagList" closable @close="deleteTags(item)">{{ item }}</el-tag>
                <editInput :isCustomTag="false" @input="inputTagClick" :label="'新建标签'">
                    <!-- <template #tag>
                        <el-icon  color="#B57DF2" @click="editClick"><EditPen /></el-icon>
                    </template> -->
                </editInput>
                <!-- <el-button class="button-new-tag ml-1" size="small" @click="addTagClick">
                  + 新建关键词
                </el-button> -->
            </div>


        </div>
</template>

<script setup lang="ts">
import {ArrowLeftBold, EditPen} from '@element-plus/icons-vue'
import editInput from '@/components/editInput/input.vue'
import {ref, watch, onMounted} from 'vue'
const props = defineProps<{
    title: string,
    tagList?: any[],
}>()
const inputText = ref<string>()
const showInput = ref<boolean>(true)
const emit = defineEmits(['backClick', 'addTag', 'edit', 'inputChange'])
const backClick = ():void => {
    emit('backClick');
}
watch(() => props.title, (newVal) => {
    showInput.value = !newVal
})
const clickEditTitle = () => {
    inputText.value = props.title
    showInput.value = true;
}

const inputClick = () => {
    emit('inputChange', {label: inputText.value, type: 'title'})
    showInput.value = false
}
const inputTagClick = (label: string) => {
    emit('inputChange', {label: label, type: 'tag'})
}
const deleteTags = (label: string) => {
    emit('inputChange', {label: label, type: 'del'})
}
</script>

<style scoped lang="css">
.header {
    height: 6vh;
    background: #25212B;
    width: 100%;
    border-radius: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.icon {
    height: 2.8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #453C4F;
    box-sizing: border-box;
    padding:0 15px;
    width: 80px;
    border-radius: 6px;
    font-size: 13px;
    color: #B197D4;
    cursor: pointer;
    /* border: 1px solid # */
}
.title {
    margin-left: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-right: 206px;
    width: auto;
}
.title h2 {
    margin-right: 10px;
    margin-bottom: 0;
}
.tag {
    display: flex;
    align-items:center;
}
.tag > span {
    font-size: 16px;
}
.tag .ml-2 {
    margin-right: 10px;
    color: #BC81FC;
    font-size: 12px;
    /* padding: 1px 10px; */
}
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-tag .ant-tag-close-icon:hover) {
    color: #9539FC !important;
}
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-tag.ant-tag-has-color .anticon-close){
    color: #BC81FC;
    margin-left: 6px;
}
</style>